<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div class="add">
        <el-upload
          ref="upload"
          :action="upLoadPic"
          :before-upload="beforeUpload"
          class="settingBtn mr10"
          :headers="headers"
          multiple
          name="fileInput"
          :on-success="handleSuccess"
          :show-file-list="false"
          type="primary"
        >
          <el-button class="settingBtn" type="primary" @click="uploadFn" plain>
            上传图片
          </el-button>
        </el-upload>
        <el-button
          v-if="MenuAuths('add')"
          class="settingBtn"
          type="primary"
          @click="addFn"
          plain
        >
          {{ translate('绑定物料') }}
        </el-button>
        <el-button class="settingBtn" type="primary" @click="uploadFn" plain>
            删除
          </el-button>
      </div>
      <div>
        <el-row>
          <el-col
            v-for="(item, index) in tableData"
            :key="index"
            :span="3"
            @click="checkFn(item)"
          >
            <div class="img-content" :class="item.check ? 'check' : ''">
              <img
                v-if="item.check"
                class="icon-img"
                :src="require('@/assets/login_images/jiaobiao.png')"
              />
              <img
                v-if="item.check"
                class="icon-img1"
                :src="require('@/assets/login_images/dele.png')"
                @click="deletedFn(item)"
              />
              <img class="img-list" :src="item.FilePath" />
              <div class="img-name">{{ item.FileName }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="translate('物资列表')"
      width="650px"
      @close="closeFn"
    >
      <div style="padding-bottom: 20px">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchInfo1"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="ProductsData">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div>
        <el-table
          border
          :data="productData"
          height="400"
          style="width: 600px"
          @row-click="singleElection"
        >
          <el-table-column width="55">
            <template #default="{ row }">
              <el-radio-group v-model="productNo">
                <el-radio :label="row.Code" />
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column :label="translate('物资编码')" prop="Code" />
          <el-table-column :label="translate('物资名称')" prop="FullName" />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :current-page="pageNo1"
            :layout="layout"
            :page-size="pageSize1"
            :total="total1"
            @current-change="handleCurrentchiled"
            @size-change="handleSizechiled"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submitChiled">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { GetPageDataPubItem, getPageData, ItemBindFile, deletemarkdoc } from '@/api/item'
  import { MenuAuth } from '~/src/utils/permission'
  import { useUserStore } from '@/store/modules/user'
  import { baseURL } from '@/config'
  import { translate } from '@/i18n'
  const { token } = useUserStore()
  export default defineComponent({
    name: 'Arrival',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        MenuAuths: '',
        translate: translate,
        selectItem: [],
        upLoadPic: '',
        headers: '',
        searchInfo1: '',
        total1: 0,
        pageNo1: 1,
        pageSize1: 20,
        productData: [],
        selectProduct: {},
        productNo: '',
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      singleElection(val) {
        this.productNo = val.Code
        this.selectProduct = val
      },
      // changeproduct(e) {
      //   this.selectProduct = e
      // },

      ProductsData() {
        ;(this.pageNo1 = 1), (this.productData = [])
        this.getPageData()
      },
      async uploadFn(row) {
        this.headers = this.headers = {
          Authorization: `Bearer ${token}`,
        }
        this.upLoadPic = `${baseURL}/WF_Document/UploadFile?TypeName=Pub_Item&FormId=0000000000`
      },
      submitChiled() {
        this.saveItemBindFile()
      },
      async deletedFn(row) {
        this.$confirm(translate('确认删除该图片吗?'), translate('提示'), {
          confirmButtonText: translate('确定'),
          cancelButtonText: translate('取消'),
          type: 'warning',
        })
          .then(() => {
            this.deleted(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: translate('已取消删除'),
            })
          })
      },
      async deleted(row) {
           const params = {
                fileId:row.FileId
           }

           const data = await deletemarkdoc(params)
           if (data.code === '200') {
              this.$message.success('删除成功')
              this.getList()
            }
      },
      async saveItemBindFile() {
        const selectlist = []
        this.selectItem.map((item) => {
          selectlist.push({
            fileid: item.FileId,
          })
        })
        const params = {
          iid: this.selectProduct.IID,
          list: selectlist,
        }
        const data = await ItemBindFile(params)
        if (data.code === '200') {
          this.$message.success('保存成功')
        }
        this.dialogVisible = false
      },
      beforeUpload(file, fileList) {
        const fileTypeName = file.name.substring(
          file.name.lastIndexOf('.') * 1 + 1 * 1
        ) // 获取后缀名
        const supportFormat = [
          'jpg',
          'png',
          'gif',
          'JPEG',
          'PNG',
          'GIF',
          'JPG',
          'jpeg',
        ]
        const isLt2M = file.size / 1024 / 1024 < 2
        const index = supportFormat.indexOf(fileTypeName)
        if (!isLt2M) {
          this.message('error', '上传图片大小不能超过 2MB!')
          return false
        }
        if (index == -1) {
          // 说明核实不符合
          this.message('warning', '上传文件的格式不合符，请重新上传！')
          return false
        }
        return true
      },
      handleSuccess(file, fileList) {
        console.log(file, fileList)
        if (file.code != '200') {
          this.$message.warning(file.message)
        } else {
          this.$message.success('上传成功')
          this.getList()
        }
      },
      checkFn(item) {
        item.check = !item.check
        if (item.check) {
          this.selectItem.push(item)
        } else {
          this.selectItem.map((val, index) => {
            if (val.ID === item.ID) {
              this.selectItem.splice(index, 1)
            }
          })
        }
        console.log(this.selectItem)
      },
      //物资列表
      async getPageData() {
        const params = {
          pageNo: this.pageNo1,
          pageSize: this.pageSize1,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'FileName', value: this.searchInfo1, displayType: 'like' },
          ]),
          export: false,
          value: '',
        }
        const data = await getPageData(params)
        this.productData = data.data.rows
        this.total1 = data.data.total
        console.log(this.tableData)
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'FileName', value: this.searchInfo, displayType: 'like' },
          ]),
          export: false,
          value: 'Pub_Item',
          openid: '0000000000',
        }
        const data = await GetPageDataPubItem(params)
        this.tableData = data.data.rows
        this.total = data.data.total
        console.log(this.tableData)
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      //分页条数切换
      handleSizechiled(val) {
        this.pageSize1 = val
        this.getPageData()
      },
      //分页切换
      handleCurrentchiled(val) {
        this.pageNo1 = val
        this.getPageData()
      },
      async addFn() {
        if (this.selectItem.length <= 0) {
          this.$message.warning('请先选择绑定的图片')
        } else {
          this.getPageData()
          this.dialogVisible = true
          this.productNo = ''
          this.selectProduct = {}
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }

    .iconcommon {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: blue;
    }
    .iconcommon2 {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: red;
    }
    .img-content {
      width: 120px;
      height: 140px;
      text-align: center;
      margin: auto;
      border: 1px solid #eee;
      margin-bottom: 20px;
      border-radius: 5px;
      position: relative;
      padding: 10px 5px;

      .img-list {
        width: 100px;
        height: 100px;
      }
      .icon-img {
        position: absolute;
        width: 30px;
        height: 30px;
        right: -7px;
        bottom: -7px;
      }
      .icon-img1 {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0px;
        top: 2px;
      }
      .img-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
    }
    .check {
      border: 2px solid #1890ff;
    }
    .settingBtn {
      display: inline-block;
    }
    .add {
      margin-bottom: 10px;
      text-align: left;
      padding-left: 35px;
    }
  }
  ::v-deep .el-radio__label {
    display: none;
  }
</style>
